<template>
    <div class="top">
        <div class="left">
            <span>订单提交成功,请尽快付款!&nbsp;订单号：</span>
            <b style="color:red">{{detail?.order_id}}</b>
        </div>
        <div class="total_fee">
            应付金额
            <b style="color:red;font-size:20px">{{detail?.total_fee}}</b>元
        </div>
    </div>
    <div class="payment">
        <div class="title">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wechat_pay"></use>
            </svg>
            <b>微信支付</b>
            <span>请使用微信扫码支付</span>
        </div>
        <div class="main">
            <div class="left">
                <div class="qrcode" v-loading="qrLoading">
                    <!-- 展示二维码 -->
                    <img :src="qrSrc" alt="" width="300" height="300">
                    <div class="pw-box-ft">
                        <div class="svg">
                            <svg class="icon">
                                <use xlink:href="#icon-weixin1"></use>
                            </svg>
                        </div>
                        <div class="qr-right">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">

            </div>
        </div>
        <el-descriptions title="订单消息">
            <el-descriptions-item label="创建时间">{{detail?.create_time}}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{detail?.user_nickname}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{detail?.user_phone}}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{detail?.orderDetail[0].productName}}</el-descriptions-item>
            <el-descriptions-item label="产品描述">
            {{detail?.orderDetail[0].description}}
            </el-descriptions-item>
            <el-descriptions-item label="收件地址">
                {{detail?.address}}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup>
import { ElMessage} from 'element-plus'
import * as api from "@/api/pay"
import {useRoute,useRouter} from "vue-router"
import { onUnmounted,ref} from "vue";
// 引入生成二维码的库
import qr from "qrcode"
let router = useRouter()
let route = useRoute()

// 声明一个定时器 
let timeout = null;
// 1.发起请求，根据query传递过来的order_id获取订单详情
let {order_id} = route.query
console.log(order_id);
// 声明响应式变量，存储订单的详情
let detail =ref()
// 一个响应式变量存储二维码地址
let  qrSrc = ref("")
// 一个二维码展示的加载动画
let qrLoading = ref(false)
let getOrder=async ()=>{
    // 开启二维码加载动画
    qrLoading.value = true;
    try{
        let res = await api.getOrderApi(order_id)
        // console.log(res);
        //订单状态:0未提交 1提交成功 2已经取消 3无效订单 4.交易关闭 5退货
        // 也就意味着，订单状态为1时才能够发起支付
        // 获取订单状态
        let {order_status} =res.data.data
        // console.log('状态===',order_status);
        detail.value = res.data.data
        // console.log(detail.value);
        // 如果没有订单ID
        if(!order_id){
            ElMessage({
                type:'error',
                message:"没有获取到订单id,2秒后回到充值页面"
            })
        }
        if(order_status===1){
            // 先从本地查询一下，这个订单有没有发起过支付
            let code_url = localStorage.getItem(order_id)
            if(code_url){//这个订单已经发起过支付，可能用户没有支付
                // console.log(code_url);
                // 使用qrcode将支付地址变成二维码
                qr.toDataURL(code_url,(err,url)=>{
                    // console.log(url);
                    if(err){
                        ElMessage.error(err.toString())
                        return
                    }
                    qrSrc.value=url;
                    // 关闭二维码加载动画
                    qrLoading.value = false;
                })
            }else{
                //这个状态才可以支付，发起支付请求
                try{
                    let res = await api.paymentApi(order_id)
                    // console.log(res);
                    //同一个订单不能频繁发起支付，所以可以使用订单的id作为key,支付的返回结果作为值，放到本地存储中
                    localStorage.setItem(order_id,res.data.code_url)
                    qr.toDataURL(res.data.code_url,(err,url)=>{
                        if(err){
                            ElMessage.error(err.toString())
                            return
                        }
                        qrSrc.value=url;
                        // 关闭二维码加载动画
                        qrLoading.value = false;
                    })
                    
                }catch(e){
                    console.log(e);
                }
            }
        }else{
            switch(order_status){
                case 0:
                    ElMessage({
                        type:'error',
                        message:"订单未提交,2秒后回到充值页面"
                    })
                    break;
                case 2:
                    ElMessage({
                        type:'error',
                        message:"订单已取消,2秒后回到充值页面"
                    })
                    break;
                case 3:
                    ElMessage({
                        type:'error',
                        message:"无效订单,2秒后回到页面"
                    })
                    break;
                case 4:
                    ElMessage({
                        type:'error',
                        message:"交易关闭,2秒后回到充值页面"
                    })
            }
            timeout = setTimeout(() => {
                router.push('/vipManager/charge')
            }, 2000);
        }
    }catch(e){
        console.log(e);
    }
}
getOrder()
// 2.发起支付，提交订单id,后台会返回支付的地址给我们
// 3.需要将支付地址转化为二维码

// 页面卸载的时候，清除定时器

// 使用ajax轮询的方式，来查询支付的状态
// 因为http的通信特性，服务端不能主动推送内容给客户端
// 轮询：设定一个定时器，间隔性的发送请求，询问服务器，数据是否变化
let poling = () =>{
    let interval = setInterval(async()=>{
        let res = await api.queryPayStatusApi(order_id)
        console.log(res);
        if(res.data.state){
            // 支付成功，跳转页面到支付成功的页面，清掉本地的缓存
            router.push("/pay/paysuccess")
            localStorage.removeItem(order_id)
        }
    },2000);
    return interval
}
let interval = poling()

onUnmounted(()=>{
    if(timeout){
        clearTimeout(timeout)
    }
    clearInterval(interval)
})
// 支付流程围绕2步
// 1.下单（预支付） 一般携带商品的id和商品的数量
// 2.发起支付，调用支付接口，传递订单id
</script>
<style scoped lang="less">
.payment{
    background-color: #fff;
    padding:5px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}
.main{
    display: flex;
    justify-content: center;
}
.top{
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .total_fee{
        margin-top: 10px;
    }

}
.title{
    margin: 10px 20px;
    b{
        font-size: 30px;
        display: inline-block;
        margin-right: 135px;
    }
    :deep(.icon){
        vertical-align: text-bottom;
        width: 2em;
        height: 2em;
        margin-right: 10px;
    }
}
.pw-box-ft{
    height: 44px;
    padding:8px 0 8px;
    background-image: linear-gradient(135deg,#4c67ff,#5635df);
    display: flex;
    justify-content: space-evenly;
    .qr-right{
        p{
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            font-weight: 700;
        }
    }
    .icon{
        width: 3em;
        height: 3em;
    }
}


.right{
    width: 379px;
    height: 421px;
    padding-left: 50px;
    margin-top: -20px;
    background: url(../../../../assets/phone.png) 50px 0 no-repeat;

}
</style>